<template>
  <div
      style="height:100vh; display:flex; align-items: center; justify-content:center;background-color:white;margin-top: -60px;">
    <div style="display:flex;background-color: white;width: 50%;border-radius:5px; overflow: hidden;">
      <div style="flex:1 ;display: flex; align-items:center; justify-content: center;">
        <el-form :model="loginForm" :rules="rules" ref="loginForm" style="width: 40%;">
          <div style="font-size: 20px;font-weight: bold; text-align: center; margin-bottom: 20px;">
            欢迎进入汽车拍卖系统
          </div>
          <el-form-item label="" prop="username" :rules="[{ required: true, message: '请输入账号', trigger: 'blur' }]">
            <el-input prefix-icon="el-icon-user" size="medium" placeholder="请输入账号"
                      v-model="loginForm.username"></el-input>
          </el-form-item>
          <el-form-item label="" prop="password" :rules="[{ required: true, message: '请输入密码', trigger: 'blur' }]">
            <el-input prefix-icon="el-icon-lock" size="medium" type="password" v-model="loginForm.password"
                      placeholder="请输入密码"></el-input>
          </el-form-item>

          <el-form-item prop="code">
            <el-input
                type="text"
                v-model="loginForm.code"
                placeholder="验证码">
              <template slot="append">
                <img class="login-code" :src="imageUrl" title="点击刷新" @click="refreshCode">
              </template>
            </el-input>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" style="width:100%" @click="login">登录</el-button>
            还没有账号？请去
            <el-button type="text" @click="register">注册</el-button>
            <br>
            密码忘记了？请去
            <el-button type="text" @click="modifyPassword">忘记密码</el-button>
          </el-form-item>
          <el-form-item v-if="errorMessage" style="color: red;">
            {{ errorMessage }}
          </el-form-item>
        </el-form>
        <p v-if="message">{{ message }}</p>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';
import {Message} from 'element-ui';

export default {
  data() {
    return {
      imageUrl: '/api/user/login/code',
      loginForm: {
        category: '2',
        username: '965414324@qq.com',
        password: '123456',
        code: '', //验证码
      },
      errorMessage: '',
      message: '',
      rules: {
        username: [
          {required: true, message: '请输入账号', trigger: 'blur'},
        ],
        password: [
          {required: true, message: '请输入密码', trigger: 'blur'},
        ],
        code: [
          {required: true, message: '请输入验证码', trigger: 'blur'},
        ],
      },
    };
  },
  methods: {
    async login() {
      if (!this.loginForm.code) {
        Message.error('未输入验证码');
        return;
      }

      // 首先验证用户是否存在
      const checkUserResponse = await axios.get('/api/user/login/findPwd', {
        params: { account: this.loginForm.username },
      });
      if (checkUserResponse.data && checkUserResponse.data.code !== 200) {
        Message.error('用户不存在:', checkUserResponse.data);
        return;
      }

      // 发送登录请求
      try {
        const response = await axios.post('/api/user/login', {
          category: this.loginForm.category,
          account: this.loginForm.username,
          password: this.loginForm.password,
          code: this.loginForm.code,
        });

        if (response.data && response.data.code === 200) {
          localStorage.setItem('token', response.data.data);
          Message.success('登录成功');
          await this.$router.push({path: '/User'});
        } else {
          if (response.data.code === 5001&&response.data.code !== 500) {
            Message.error('验证码错误');
          } else if (response.data.code === 500) {
            Message.error('密码错误');
          }
        }
      } catch (error) {
        this.errorMessage = '登录失败，请检查接口';
      }
    },
    register() {
      this.$router.push({path: '/UserRegisterView'});
    },
    modifyPassword() {
      this.$router.push({path: '/modifyPasswordView'});
    },
    refreshCode() {
      // 点击后刷新图片
      this.imageUrl = '/api/user/login/code?' + new Date().getTime()
    }
  }
};
</script>

<style scoped>

</style>
